<template>
  <div class="user-manage-container">
    <div class="knowledge-box">
      <LeftTree @onClickTree="onClickTable"></LeftTree>
    </div>
    <div class="knowledge-list-box">
      <div class="operate-bar">
        <ul>
          <li>
            <el-select
              class="knowledgeFind-select"
              v-model="modelFindName"
              filterable
              clearable
              placeholder="物模型"
              @change="getKnowledgeTableData"
            >
              <el-option
                v-for="item in listModelSelect"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              class="knowledgeFind-input"
              v-model="knowledgeFindName"
              placeholder="输入知识代码/名称查找"
              v-on:keyup.enter.native="getKnowledgeTableData()"
              clearable
              @clear="getKnowledgeTableData()"
            ></el-input>
          </li>
        </ul>
        <div>
          <el-button
            type="primary"
            @click="onAddKnowledge()"
            v-has="'maintenanceApp:knowledgeBase:add'"
          >新增</el-button>
        </div>
      </div>
      <el-table
        :data="knowledgeTableData"
        stripe
        height="441"
      >
        <el-table-column
          type="index"
          label="序号"
        > </el-table-column>
        <el-table-column
          prop="id"
          label="知识代码"
        > </el-table-column>
        <el-table-column
          prop="category_name"
          label="知识分类名称"
        > </el-table-column>
        <el-table-column
          prop="device_model_name"
          label="物模型"
          show-overflow-tooltip
        > </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
          show-overflow-tooltip
        > </el-table-column>
        <el-table-column
          prop="is_public"
          label="权限"
        >
          <template slot-scope="scope">
            <p v-if="scope.row.is_public === 2">公开</p>
            <p v-else>内部</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="file_name"
          label="附件"
        >
          <template slot-scope="scope">
            <a
              v-if="scope.row.file_name"
              :href="scope.row.file_url"
              :download="scope.row.file_name"
              class="a-download"
            >
              <i class="el-icon-paperclip sc-color-blue"></i><span>下载附件</span></a>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <div class="operate-box">
              <span
                class="content-tablebtn cursor-css sc-color-blue"
                @click="onInfoKnowledge(scope.row)"
                v-has="'maintenanceApp:knowledgeBase:detail'"
              >详情</span>
              <span
                class="content-tablebtn cursor-css sc-color-blue"
                @click="onEditKnowledge(scope.row)"
                v-has="'maintenanceApp:knowledgeBase:edit'"
              >修改</span>

              <el-popover
                popper-class="table-operate-popper"
                placement="bottom-end"
                trigger="hover"
                v-has="'maintenanceApp:knowledgeBase:delete'"
              >
                <ul class="operate-list-box">
                  <li @click="deleteKnowledge(scope.row.id)">
                    <p
                      :underline="false"
                      class="sc-color-red"
                    >删除</p>
                  </li>
                </ul>
                <span
                  slot="reference"
                  class="more-operate"
                >···</span>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <CommonPagination
        :options="paginationOptions"
        :dataSource="getKnowledgeTableData"
      ></CommonPagination>
    </div>

    <!-- 新增知识库 -->
    <el-dialog
      :title="trueEdit ? '编辑知识库' : '新增知识库'"
      :visible.sync="addknowledgeDialog"
      :append-to-body="true"
      width="1000px"
      top="11vh"
      @close="onDeleteForm"
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          :model="addForm"
          :rules="rulesKnowledge"
          ref="ruleFormref"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="物模型"
            prop="modelName"
          >
            <el-select
              class="add-knowledge-select-class1"
              v-model="addForm.modelName"
              filterable
              clearable
              placeholder="物模型"
            >
              <el-option
                v-for="item in modelSelectData"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- <el-input v-model="knowledgeFindName" placeholder="输入知识代码/名称查找"></el-input> -->
          </el-form-item>
          <el-form-item
            label="知识分类"
            prop="knowledgeTypeName"
          >
            <div class="knowlege-flex">
              <el-select
                class="add-knowledge-select-class"
                v-model="addForm.knowledgeTypeName"
                filterable
                clearable
                placeholder="请选择知识库分类"
              >
                <el-option
                  v-for="item in addForm.knowledgeTypeArr"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <div class="add-knowledge-jurisdiction">
                <span class="sc-color-red">*</span> <span class="add-knowledge-margin">权限</span>
                <el-radio
                  v-model="addForm.jurisdictionValue"
                  label="2"
                >公开</el-radio>
                <el-radio
                  v-model="addForm.jurisdictionValue"
                  label="1"
                >内部</el-radio>
              </div>
            </div>
          </el-form-item>
          <el-form-item
            label="标题"
            prop="titleValue"
          >
            <el-input
              v-model.trim="addForm.titleValue"
              placeholder="限输入1~16个文字"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="内容"
            prop="contentVlaue"
          >
            <Editor
              ref="textEdit"
              :editorValue="addForm.contentVlaue"
              @onEditorValue="onEditorValue"
            ></Editor>
          </el-form-item>
          <el-form-item
            label="现场图片"
            prop="modelName"
          >
            <el-upload
              action
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="removeImg"
              :on-change="uploadImg"
              :auto-upload="false"
              :file-list="imgList"
            >
              <!-- :http-request="httpRequest" -->
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog
              :visible.sync="dialogImg"
              append-to-body
              :modal="false"
              width="500px"
            >
              <img
                width="100%"
                height="100%"
                :src="dialogImageUrl"
                alt=""
                class="view-img"
              />
            </el-dialog>
            <p class="sc-color-gray">支持JPG\PNG\GIF格式，文件不大于2M，最多不能超过5张</p>
          </el-form-item>
          <el-form-item
            label="上传附件"
            prop="modelName"
          >
            <el-upload
              class="upload-demo"
              action
              :on-change="addUploadFile"
              :auto-upload="false"
              :on-remove="removeFile"
              multiple
              :limit="1"
              :file-list="fileList"
            >
              <el-button
                size="small"
                type="primary"
              >点击上传</el-button>
              <span
                slot="tip"
                class="sc-color-gray add-knowledge-file"
              >文件大小不能超过100M</span>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="addknowledgeDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="trueEdit ? editKnowledgeSubmit() : addKnowledgeSubmit()"
        >确 定</el-button>
      </div>
    </el-dialog>

    <!-- 知识库详情 -->
    <el-dialog
      title="知识库详情"
      :visible.sync="infoknowledgeDialog"
      :append-to-body="true"
      width="700px"
      top="11vh"
      :close-on-click-modal="false"
    >
      <div>
        <div class="knowlege-info-flex">
          <div class="knowledge-info-width">
            <span class="knowledge-info-name-text">物模型</span><span>{{ infoKnowledgeData.device_model_name }}</span>
          </div>
          <div class="knowledge-info-width">
            <span class="knowledge-info-name-text">权限</span><span>{{ infoKnowledgeData.is_public === 2 ? '公开' : '内部' }}</span>
          </div>
        </div>
        <div class="knowlege-info-flex">
          <div class="knowledge-info-width">
            <span class="knowledge-info-name-text">知识代码</span><span>{{ infoKnowledgeData.id }}</span>
          </div>
          <div class="knowledge-info-width">
            <span class="knowledge-info-name-text">知识分类</span><span>{{ infoKnowledgeData.category_name }}</span>
          </div>
        </div>
        <div class="knowlege-info-flex">
          <span class="knowledge-info-name-text">附件</span>
          <a
            class="a-download"
            :href="infoKnowledgeData.file_url"
            :download="infoKnowledgeData.file_name"
            v-show="infoKnowledgeData.file_url"
          >
            <i class="el-icon-paperclip sc-color-blue"></i><span>{{ infoKnowledgeData.file_name }}</span></a>
        </div>
        <div class="knowlege-info-flex">
          <span class="knowledge-info-name-text">内容</span><span v-html="infoKnowledgeData.content"></span>
        </div>
        <div class="knowlege-info-flex">
          <span class="knowledge-info-name-text">现场图片</span><span><img
              class="knowledge-info-img"
              @click="handlePictureCardPreview(item)"
              v-for="(item, index) in infoKnowledgeData.img_url"
              :key="index"
              :src="item"
            />
          </span>
        </div>
        <el-dialog
          :visible.sync="dialogImg"
          :modal="false"
          width="30%"
        >
          <img
            width="100%"
            style="min-width: 148px"
            height="100%"
            :src="dialogImageUrl"
            alt=""
          />
        </el-dialog>
        <div class="knowlege-info-flex">
          <div class="knowledge-info-width">
            <span class="knowledge-info-name-text">创建人</span><span>{{ infoKnowledgeData.create_name }}</span>
          </div>
          <div class="knowledge-info-width">
            <span class="knowledge-info-name-text">更新时间</span><span>{{ infoKnowledgeData.updated_time }}</span>
          </div>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="infoknowledgeDialog = false">关 闭</el-button>
        <!-- <el-button type="primary" @click="infoknowledgeDialog = false">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Editor from './components/wangEditor.vue';
import LeftTree from './components/KnowledgeTree.vue';
import CommonPagination from '@/components/CommonPagination.vue';
import {
  getModelList,
  getDeviceModelListByKnow,
  getKnowCategoryList,
  createKnow,
  uploadFile,
  getKnowList,
  deleteKnow,
  updateKnow
} from '@/api/knowledgeBaseApi.js';

export default {
  name: 'UserManage',
  components: {
    LeftTree,
    CommonPagination,
    Editor
  },
  data() {
    return {
      category_id: 0,
      modelFindName: '',
      modelSelectData: [], //物模型数据
      listModelSelect: [], //获取知识库的已有物模型
      knowledgeFindName: '',
      tableMaxHeight: null,

      dialogImageUrl: '',
      knowledgeTableData: [], //知识库数据
      paginationOptions: {
        total: 0,
        currentPage: 1,
        pageSize: 15,
        pageSizes: [15, 30, 50, 100],
        pagerCount: 5,
        isShow: true,
        isDisabled: false
      }, //分页
      trueEdit: false,
      addknowledgeDialog: false, //新增知识库弹窗
      addForm: {
        modelNameArr: [],
        modelName: '',
        knowledgeTypeArr: [],
        knowledgeTypeName: '',
        jurisdictionValue: '2',
        titleValue: '',
        contentVlaue: '',
        isClear: false //清除富文本编辑器内容
      },
      rulesKnowledge: {
        //新增plc输入框校验
        knowledgeTypeName: [{ required: true, message: '请选择知识库分类', trigger: 'blur' }],
        titleValue: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 16, message: '限16个文字', trigger: 'blur' }
        ],
        contentVlaue: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },

      dialogImg: false, //图片预览弹窗
      imgList: [], //上传图片列表
      fileList: [], //文件上传列表
      fileFname: '', //文件上传名
      infoknowledgeDialog: false, //知识库详情弹窗
      infoKnowledgeData: '' //知识库详情数据
    };
  },
  mounted() {
    this.onModelData();
    this.getKnowledgeTableData();

    this.$nextTick(() => {
      this.tableHeightResize();

      // 监听窗口大小变化
      window.onresize = () => {
        this.tableHeightResize();
      };

      // 监听菜单栏的展开收起
      let sidebarEl = document.querySelector('.fold-icon');
      if (sidebarEl) {
        sidebarEl.addEventListener('click', () => {
          this.tableHeightResize();
        });
      }
    });
  },
  methods: {
    // 表格高度处理（示例）- 根据实际开发页面做相关调整即可
    tableHeightResize() {
      // 主内容区高度
      let mainContentEl = document.querySelector('.main');
      let mainContentHeight = mainContentEl ? mainContentEl.getBoundingClientRect().height : 0;

      /*
        表格高度（获取main元素的高度，然后减去其它元素的高度）
        18：页面标题
        76：操作栏
        51：表头
        72：页码
      */
      this.tableMaxHeight = mainContentHeight - 18 - 76 - 51 - 72;

      // 主内容区宽度
      let winInnerWidth = window.innerWidth;

      // 菜单栏宽度
      let sidebarWidth = document.querySelector('.sidebar-container').getBoundingClientRect().width;

      // 主内容区宽度
      let mainContentWidth = winInnerWidth - sidebarWidth - 320 - 30;
      mainContentWidth = mainContentWidth < 710 ? 710 : mainContentWidth;

      // 表格宽度
      let tableEl = document.querySelector('.el-table');
      tableEl.style.width = mainContentWidth - 40 + 'px';
    },
    //物模型数据
    onModelData() {
      let params = {};
      params.id = 0;
      params.name = '';
      getModelList(params).then(res => {
        res.data.map(item => {
          item.value = item.id;
          item.label = item.name;
          this.modelSelectData.push(item);
          this.addForm.modelNameArr.push(item);
          this.listModelSelect.push(item);
        });
      });
      // getDeviceModelListByKnow({}).then(res => {
      //   res.data.map(item => {
      //     item.value = item.id;
      //     item.label = item.name;
      //     this.listModelSelect.push(item);
      //   });
      // });
    },
    onClickTable(data) {
      this.category_id = data;
      this.getKnowledgeTableData();
    },
    // 获取表格数据
    getKnowledgeTableData() {
      let params = {
        category_id: this.category_id,
        search: this.knowledgeFindName,
        device_model_id: this.modelFindName ? parseInt(this.modelFindName) : '',
        page: this.paginationOptions.currentPage,
        page_size: this.paginationOptions.pageSize
      };
      getKnowList(params).then(res => {
        this.knowledgeTableData = res.data.list;
        this.paginationOptions.total = res.data.total;
      });
    },
    //打开新增弹窗
    onAddKnowledge() {
      this.addForm = {
        // modelNameArr: [],
        modelName: '',
        knowledgeTypeArr: [],
        knowledgeTypeName: '',
        jurisdictionValue: '2',
        titleValue: '',
        contentVlaue: '',
        isClear: false //清除富文本编辑器内容
      };
      this.trueEdit = false;
      this.imgList = []; //上传图片列表
      this.fileList = []; //文件上传列表
      //知识库分类
      getKnowCategoryList().then(res => {
        res.data.list.map(item => {
          item.value = item.id;
          item.label = item.name;
          this.addForm.knowledgeTypeArr.push(item);
        });
      });
      //重新创建富文本编辑器
      this.$nextTick(res => {
        this.$refs.textEdit.resetData();
      });
      this.addknowledgeDialog = true;
    },
    //提交新增知识库
    addKnowledgeSubmit() {
      this.$refs.ruleFormref.validate(valid => {
        if (valid) {
          let params = {
            device_model_id: this.addForm.modelName,
            category_id: this.addForm.knowledgeTypeName,
            is_public: parseInt(this.addForm.jurisdictionValue),
            title: this.addForm.titleValue,
            content: this.addForm.contentVlaue,
            photos: [],
            file_url: this.fileList.length === 0 ? '' : this.fileList[0].url,
            file_name: this.fileList.length === 0 ? '' : this.fileList[0].name
          };
          if (this.imgList.length >= 1) {
            this.imgList.forEach(res => {
              params.photos.push(res.url);
            });
          }
          createKnow(params).then(res => {
            this.addknowledgeDialog = false;
            this.getKnowledgeTableData();
          });
        } else {
          return false;
        }
      });
    },
    //打开编辑弹窗
    onEditKnowledge(row) {
      this.onAddKnowledge();
      this.trueEdit = true;
      if (typeof row.img_url === 'string') {
        row.img_url = JSON.parse(row.img_url);
      } else if (row.img_url.length === 0) {
        row.img_url = [];
      }
      this.infoKnowledgeData = row;
      //回显
      this.addForm = {
        modelName: row.device_model_id === 0 ? '' : row.device_model_id,
        knowledgeTypeArr: this.addForm.knowledgeTypeArr,
        knowledgeTypeName: row.category_id,
        jurisdictionValue: row.is_public.toString(),
        titleValue: row.title,
        contentVlaue: row.content,
        isClear: false //清除富文本编辑器内容
      };
      row.img_url.map(item => {
        this.imgList.push({ url: item });
      });
      if (row.file_url) {
        this.fileList = [{ name: row.file_name, url: row.file_url }]; //文件上传列表
      }
      if (this.imgList.length === 5) {
        setTimeout(() => {
          document.querySelector('.el-upload--picture-card').style.display = 'none'; //隐藏上传图片按钮
        }, 1000);
      }
    },
    //提交编辑知识库
    editKnowledgeSubmit() {
      this.$refs.ruleFormref.validate(valid => {
        if (valid) {
          let params = {
            id: this.infoKnowledgeData.id,
            device_model_id: this.addForm.modelName,
            category_id: this.addForm.knowledgeTypeName,
            is_public: parseInt(this.addForm.jurisdictionValue),
            title: this.addForm.titleValue,
            content: this.addForm.contentVlaue,
            photos: [],
            file_url: this.fileList.length === 0 ? '' : this.fileList[0].url,
            file_name: this.fileList.length === 0 ? '' : this.fileList[0].name
          };
          if (this.imgList.length >= 1) {
            this.imgList.forEach(res => {
              params.photos.push(res.url);
            });
          }
          updateKnow(params).then(res => {
            this.addknowledgeDialog = false;
            this.getKnowledgeTableData();
          });
        } else {
          return false;
        }
      });
    },
    //打开知识库详情弹窗
    onInfoKnowledge(row) {
      if (typeof row.img_url === 'string') {
        row.img_url = JSON.parse(row.img_url);
      } else if (row.img_url.length === 0) {
        row.img_url = [];
      }
      // row.img_url = row.img_url === '[]' || row.img_url.length === 0 ? [] : JSON.parse(row.img_url);
      this.infoKnowledgeData = row;
      this.infoknowledgeDialog = true;
    },
    //清空表单的值
    onDeleteForm() {
      this.imgList = [];
      this.fileList = [];
      this.$refs.ruleFormref.resetFields();
      document.querySelector('.el-upload--picture-card').style.display = 'inline-block';
    },
    //删除知识库
    deleteKnowledge(data) {
      this.$confirm('确定删除该知识？', '删除知识', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteKnow({ id: data }).then(res => {
            this.getKnowledgeTableData();
          });
        })
        .catch(() => {});
    },
    //富文本编辑器值
    onEditorValue(value) {
      this.addForm.contentVlaue = value;
    },
    //删除图片
    removeImg(file) {
      document.querySelector('.el-upload--picture-card').style.display = 'inline-block';
      this.imgList.map((item, index) => {
        if (item.uid === file.uid) {
          this.imgList.splice(index, 1);
        }
      });
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url === undefined ? file : file.url;
      this.dialogImg = true;
      document.querySelector('.el-dialog__wrapper').style.zIndex = '999999';
    },
    uploadImg(file) {
      //上传图片
      console.log(file);
      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
      const isLt3M = file.size / 1024 / 1024 < 2;

      if (this.imgList.length >= 4) {
        document.querySelector('.el-upload--picture-card').style.display = 'none'; //隐藏上传图片按钮
        // this.$message.error('只能上传五张');
        // return;
      }
      if (!isJPG) {
        this.$message.error('上传图片格式不是JPG/GIF/PNG!');
        this.$refs.upload.clearFiles();
        this.files = null;
        return;
      }
      if (!isLt3M) {
        this.$message.error('只能上传小于2M!');
        this.$refs.upload.clearFiles();
        this.files = null;
        return;
      }
      this.files = file.raw;
      // FormData 对象
      let formData = new FormData();
      // 文件对象
      formData.append('file', this.files);
      uploadFile(formData).then(res => {
        this.imgList.push({ url: res.data.path });
      });
    },
    //上传附件
    addUploadFile(file) {
      const isLt3M = file.size / 1024 / 1024 < 100;
      if (!isLt3M) {
        this.$message.error('只能上传小于100M!');
        this.$refs.upload.clearFiles();
        this.files = null;
        return;
      }
      this.files = file.raw;
      // FormData 对象
      let formData = new FormData();
      // 文件对象
      formData.append('file', this.files);
      let fileName = this.files.name;
      uploadFile(formData).then(res => {
        this.fileList = [{ name: fileName, url: res.data.path }];
        this.fileFname = fileName;
      });
    },
    //删除附件
    removeFile(file) {
      this.fileList.map((item, index) => {
        if (item.uid === file.uid) {
          this.fileList.splice(index, 1);
        }
      });
      console.log(this.fileList);
    },
    // 下载模板
    downloadTemplate() {
      const xhr = new XMLHttpRequest();
      xhr.open(
        'GET',
        'http://59.36.87.106:20105/internal/static/user//1a4fa5b0416056e254b5653ea1cd1fcc_20210915100044.jpg',
        true
      );
      xhr.responseType = 'blob';
      xhr.onload = function () {
        if (this.status === 200) {
          const fileName = 'test.jpg';
          const blob = new Blob([this.response]);
          const blobUrl = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = blobUrl;
          a.download = fileName;
          a.click();
          window.URL.revokeObjectURL(blobUrl);
        }
      };
      xhr.send();

      // debugger;
      // let aLink = document.createElement('a');
      // let evt = document.createEvent('MouseEvents');
      // evt.initEvent('click', true, false);
      // aLink.download = '模板';
      // aLink.href =
      //   'http://59.36.87.106:20105/internal/static/user//1a4fa5b0416056e254b5653ea1cd1fcc_20210915100044.jpg';
      // aLink.dispatchEvent(evt);
    }
    // beforeRemove(file, fileList) {
    //   return this.$confirm(`确定移除 ${file.name}？`);
    // }
  },
  beforeDestroy() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
//鼠标样式
.cursor-css {
  cursor: pointer;
}
//弹窗间距
::v-deep .el-dialog__body {
  padding: 0px 20px 25px 0px;
  overflow-y: auto;
  min-height: 200px;
  max-height: 580px;
  //滚动样式
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c4c6cc;
  }
}
.view-img {
  padding: 15px 20px 25px 20px;
}
.user-manage-container {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;

  .knowledge-box {
    flex-shrink: 0;
    width: 320px;
    height: 100%;
    border-right: 1px solid #ebeef5;
    overflow-y: auto;
  }

  .knowledge-list-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 20px;

    .operate-bar {
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
    }
  }
  .knowledgeFind-select {
    width: 200px;
    margin-right: 10px;
  }
  .knowledgeFind-input {
    width: 300px;
  }
}
.operate-box {
  display: flex;
}
.operate-list-box {
  li {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 20px;
    &:hover {
      cursor: pointer;
      background-color: #3378ff1a;
    }
  }
}
.more-operate {
  position: relative;
  top: 1px;
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #c0c4cc;
  transform: rotate(90deg);
  user-select: none;

  &:hover {
    color: var(--color-primary);
  }
}
.content-tablebtn {
  margin-right: 10px;
}
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c4c6cc;
  }
}

//新增弹窗
.add-knowledge-select-class1 {
  width: 860px;
}
.knowlege-flex {
  display: flex;
}
.add-knowledge-select-class {
  width: 300px;
}
.add-knowledge-jurisdiction {
  margin-left: 100px;
}
.add-knowledge-margin {
  margin-right: 10px;
}
.add-knowledge-file {
  margin-left: 10px;
}
//上传图片去掉空白闪动
::v-deep .el-upload-list__item.is-ready {
  display: none;
}
//详情
.knowlege-info-flex {
  display: flex;
  margin-top: 20px;
}
.knowledge-info-width {
  width: 50%;
  display: flex;
  justify-content: flex-start;
}
.knowledge-info-name-text {
  margin-right: 10px;
  color: #909399;
  width: 70px;
  display: inline-block;
  text-align: end;
  flex-shrink: 0;
}
.knowledge-info-img {
  width: 148px;
  height: 148px;
  margin-right: 10px;
}
//下载附件样式
.a-download {
  text-decoration: none;
  color: #606266;
}
</style>
<style lang="scss">
.table-operate-popper {
  padding: 10px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
</style>
